<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>开始使用layui</title>
    <link rel="stylesheet" href="/assets/layui/css/layui.css">
</head>
<body>
    <ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="test">
    <li class="layui-nav-item layui-nav-itemed"><a href="#">最新活动</a></li>
    <li class="layui-nav-item layui-this"><a href="#">产品</a></li>
    <li class="layui-nav-item"><a href="#">大数据</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">解决方案</a>
        <dl class="layui-nav-child">
            <dd><a href="#">移动模块</a></dd>
            <dd><a href="#">后台模块</a></dd>
            <dd><a href="#">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="#">社区</a></li>
    <li class="layui-nav-item">
        <a href="#">控制台<span class="layui-badge">9</span></a>
    </li>
    <li class="layui-nav-item">
        <a href="#">个人中心<span class="layui-badge-dot"></span></a>
    </li>
    <li class="layui-nav-item">
        <a href="#"><img src="//t.cn/RCzsCq" class="layui-nav-img">我</a>
        <dl class="layui-nav-child">
            <dd><a href="#">修改信息</a></dd>
            <dd><a href="#">安全管理</a></dd>
            <dd><a href="#">退了</a></dd>
        </dl>
    </li>
</ul>
    <div class="layui-container">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTab">
            <ul class="layui-tab-title">
                <li class="layui-this">网页设置</li>
                <li>用户管理</li>
                <li>权限分配</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-inline">
                                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">注:最少6位密码</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">城市</label>
                            <div class="layui-input-block">
                                <select name="city" lay-verify="required" lay-search lay-filter="selectCity">
                                    <option value=""></option>
                                    <option value="0">上海</option>
                                    <option value="1">杭州</option>
                                    <option value="2">北京</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">兴趣</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="like[write]" title="写作">
                                <input type="checkbox" name="like[read]" title="阅读" checked>
                                <input type="checkbox" name="like[dai]" title="发呆">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">单身</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="switch" lay-skin="switch" lay-text="是|否" lay-fiter="switchTest" value="1">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-block">
                                <input type="radio" name="sex" value="0" title="男">
                                <input type="radio" name="sex" value="1" title="女" checked>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">出生日期:</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="birthdate" required>
                            </div>
<!--                            <div class="layui-form-mid layui-word-aux">注:最少6位密码</div>-->
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">头像:</label>
                            <div class="layui-input-inline">
                                <button type="button" class="layui-btn" id="uploadDemo">
                                    <i class="layui-icon">&#xe67c;</i>
                                    上传图片
                                </button>
                            </div>
                        </div>
                        <div class="layui-form-item layui-text">
                            <label class="layui-form-label">备注</label>
                            <div class="layui-input-block">
                                <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-tab-item">
                    <!--表格                -->
                    <table class="layui-table" id="tableDemo" lay-filter="tableTest">
                    </table>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-container">
                        <ul class="layui-timeline">
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis">&#xe63f</i>
                                <div class="layui-timeline-content layui-text">
                                    <h3 class="layui-timeline-title">8月18日</h3>
                                    <p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
                                    <ul>
                                        <li>《登高》</li>
                                        <li>《茅屋》</li>
                                    </ul>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis">&#xe63f</i>
                                <div class="layui-timeline-content layui-text">
                                    <h3 class="layui-timeline-title">8月16日</h3>
                                    <p>
                                        layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
                                        <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
                                        <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔<i class="layui-icon"></i>
                                    </p>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis">&#xe63f</i>
                                <div class="layui-timeline-content layui-text">
                                    <h3 class="layui-timeline-title">过去</h3>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--<script src="/assets/layui/layui.js"></script>
    <script>
        layui.use(['layer'],function () {
            var layer = layui.layer,
                form = layui.form;

            layer.msg('hello world');
            }
        );
    </script>
    -->

    <script src="/assets/layui/layui.all.js"></script>
    <script>
        //线上版本
        (function(){
            var form = layui.form,
                element = layui.element,
                laydate = layui.laydate,
                table = layui.table,
                upload = layui.upload;

            upload.render({
               elem:'#uploadDemo',
                url:'/index/Index/upload',
                done:function (res) {
                    //上传回调
                    console.log('upload',res);
                },
                error:function () {
                    //请求回调
                }
            });

            laydate.render({
                elem:'#birthdate'
            });

            table.render({
                elem:'#tableDemo',
                title:'用户表',
                height:312,
                url:'/index/Index/user/',       //数据接口
                parseData:function(res){
                    return {
                      code:res.status,
                      msg:res.message,
                        count:res.total,
                        data:res.data,
                    };
                },
                page:true,                      //分页
                cols:[[//表头
                    {field:'id',title:'ID',width:80,sort:true,fixed:'left'},
                    {field:'username',title:'用户名',width:80},
                    {field:'sex',title:'性别',width:80,sort:true},
                    {field:'city',title:'城市',width:170},
                    {title:'操作', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
                ]],

                defaultToolbar: ['filter', 'print', 'exports', {
                    title: '提示' //标题
                    ,layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
                    ,icon: 'layui-icon-tips' //图标类名
                }],
                done:function (res,cur,count) {
                    console.log(res);
                    console.log(cur);
                    console.log(count);
                }
            });

            //监控工具条
            table.on('tool(tableTest)',function (obj) {
               var data = obj.data;         //当前行的数据
               var layEvent = obj.event;    //lay-event
                var tr = obj.tr;            //当前tr的dom的对象

                if (layEvent =='detail'){
                    //查看
                    console.log(obj);
                }
                else if (layEvent == 'del'){
                    layer.confirm('真的删除行吗?',function (index) {
                        obj.del();
                        layer.close(index);
                        //向服务器发送删除指令
                    })
                }
                else if (layEvent =='edit'){
                    //编辑

                    //同步更新缓存对象的值
                    obj.update({
                        username:'123',
                        title:'xxx'
                    });
                } else if(layEvent === 'LAYTABLE_TIPS'){
                    layer.alert('Hi，头部工具栏扩展的右侧图标。');
                }
            });

            //监听提交
            form.on('submit(formDemo)',function (data) {
                layer.msg(JSON.stringify(data.field));
                return false;
            });

            //监听select
            form.on('select(selectCity)',function (data) {
                console.log('city',data);
            });
        })();
    </script>
    <script type="text/html" id="barDemo">
        <button class="layui-btn layui-btn-xs" lay-event="detail">查看</button>
        <button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
        <button class="layui-btn layui-btn-xs" lay-event="del">删除</button>
    </script>
</body>
</html>